<template>
  <div class="positionBox">
    <div class="commonHead">
      <div class="imgBox">
        <img src="@/assets/img/diLogo.png" alt="">
        <img src="@/assets/img/TEClogo@2x.png" alt="">
        <img src="@/assets/img/muLogo.png" alt="">
      </div>
      <div class="linkBox">
        <div class="linkItem loginOut" @click="toLogin">
         <van-icon class="cross" name="cross" />
        </div>
      </div>
    </div>
    <div class="middleBox">
      <div class="formBox">
        <h1>站位设置</h1>
        <div class="tabContainer">
          <span class="tabTitle">站位模式</span>
          <div class="tabBox">
            <span @click="tabClick(0)" :class="{'active':activeIndex == 0}" class="tabItem tabFirst">
              <span class="desc">缝制</span>
            </span>
            <span @click="tabClick(1)" :class="{'activeTwo':activeIndex == 1}" class="tabItem tabLast">
              <span class="desc">挂片</span>
            </span>
          </div>
        </div>
        <div class="fieldArea" v-if="activeIndex == 0">
          <van-field label-width="5.2em" class="fieldItem" v-model="lineNumber" type="tel" placeholder="流水线号" label="流水线号" />
          <van-field label-width="5.2em" class="fieldItem" v-model="stationNum" type="tel" placeholder="缝制站位号" label="缝制站位号" />
        </div>
        <div class="fieldArea" v-else>
          <van-field label-width="5.2em" class="fieldItem" v-model="lineNumberPare" type="tel" placeholder="流水线号" label="流水线号" />
          <van-field label-width="5.2em" class="fieldItem" v-model="stationNumPare" type="tel" :placeholder="activeIndex==0?'缝制站位号':'挂片站位号'" :label="activeIndex==0?'缝制站位号':'挂片站位号'" />
        </div>
        <van-button class="loginbtn" type="primary" color="#007DBC" @click="positionSave">保存</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data(){
    return {
      activeIndex: '0',
      lineNumber:'',
      stationNum:'',
      lineNumberPare: '',
      stationNumPare:''
    }
  },
  mounted(){
    if(localStorage.getItem('positionIndex')){
      this.activeIndex = localStorage.getItem('positionIndex')
    }
    this.commonGet()
  },
  methods:{
    toLogin(){
      this.$router.go(-1)
    },
    tabClick(e){
      this.activeIndex = e
      this.commonGet()
    },
    positionSave(){
      localStorage.setItem('positionIndex',this.activeIndex)
      if(this.activeIndex == 0){
        if(!this.lineNumber) return Toast('请输入流水线号')
        if(!this.stationNum) return Toast('请输入缝制站位号')
        this.commonSet(this.lineNumber,this.stationNum,'loginMsg')
        this.$router.go(-1)
      }else{
        if(!this.lineNumberPare) return Toast('请输入流水线号')
        if(!this.stationNumPare) return Toast('请输入挂片站位号')
        this.commonSet(this.lineNumberPare,this.stationNumPare,'loginMsgPare')
        this.$router.go(-1)
      }
    },
    commonSet(lineNumber,stationNum,localStorageName){
      let loginMsg = {
        lineNumber:lineNumber,
        stationNum:stationNum
      }
      localStorage.setItem(localStorageName,JSON.stringify(loginMsg))
    },
    commonGet(){
      if(this.activeIndex == 0){
        if(localStorage.getItem('loginMsg')){
          this.lineNumber = JSON.parse(localStorage.getItem('loginMsg')).lineNumber
          this.stationNum = JSON.parse(localStorage.getItem('loginMsg')).stationNum
        }
      }else {
        if(localStorage.getItem('loginMsgPare')){
          this.lineNumberPare = JSON.parse(localStorage.getItem('loginMsgPare')).lineNumber
          this.stationNumPare = JSON.parse(localStorage.getItem('loginMsgPare')).stationNum
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.positionBox{
  background: #E7F3F9;
  height: 100%;
  display: flex;
  flex-direction: column;
  .commonHead{
    background: #fff;
    padding: 0 0px 0 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 70px;
    align-items: center;
    .imgBox{
      img{
        height: 43px;
      }
      img:nth-child(2){
        margin: 0 8px 0 3px;
      }
    }
    .linkBox{
      display: flex;
      align-items: center;
      height: 100%;
      .linkItem{
        display: flex;
        align-items: center;
        height: 100%;
        width: 100px;
        z-index: 10;
        justify-content: center;
      }
      .loginOut{
        background-image: url('../../assets/img/redBgc.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .cross{
          font-size: 40px;
          color: #fff;
          position: relative;
          right: -5px;
        }
      }
    }
  }
  .middleBox{
    flex: 1;
    background: #fff;
    margin: 20px;
    position: relative;
    .formBox{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      h1{
        font-size: 30px;
        font-weight: normal;
        margin-bottom: 20px;
      }
      .tabContainer{
        display: flex;
        margin-bottom: 18px;
        align-items: center;
        .tabTitle{
          font-size: 18px;
          padding-left: 20px;
          width: 5.2em;
        }
        .tabBox{
          display: flex;
          .tabItem{
            color: #000;
            font-size: 25px;
            position: relative;
            display: flex;
            border:0px solid transparent;
              // height:50px;
            .desc{
              position: absolute;
              text-align: center;
              line-height: 55px;
              color: #fff;
              left: 50%;
              transform: translateX(-50%);
            }
            &:active{
              opacity: .7;
            }
          }
          .tabFirst{
            width:125px;
            border-bottom:55px solid #ccc;
            border-right:12px solid transparent;
            right: -12px;
          }
          .tabLast{
            width:113px;
            border-top:55px solid #ccc;
            border-left:12px solid transparent;
            .desc{
              color: #fff;
              bottom: 0;
            }
          }
          .active{
            border-bottom:55px solid #007DBC;
          }
          .activeTwo{
            border-top:55px solid #007DBC;
            .desc{
              color: #fff;
            }
          }
        }
      }
      .fieldArea {
        margin: 5px 0 15px 0;
        .fieldItem{
          font-size: 18px;
          border: 1px solid #e0e0e0;
          margin-bottom: 16px;
          width: 420px;
          // padding: 12px 20px!important;
          height: 55px;
        }
        /deep/ .van-cell{
          padding: 15px 25px;
          .van-field__label {
            label {
              color: #000;
            }
          }
        }
        /deep/ .van-cell:after {
          transform: scaleY(0);
        }
      }
      .loginbtn {
        width: 100%;
        font-size: 25px;
        border-radius:4px;
        height: 55px;
        margin-top: 5px;
      }
    }
  }
}
</style>